<template>
  <div
    class="lg-container"
    v-wechat-title="appTitle"
  >
    <div v-if="isLoading" class="load-container">
      <i class="lg-icon-loading lg-mescroll-rotate"></i>
      <span>加载中 ...</span>
    </div>
    <template v-else>
       <h5 class="lg-title">{{title}}</h5>
      <fm-generate-form
        v-if="widgetForm.list.length > 0 && type === 1"
        ref="generateForm"
        insite="true"
        :data="widgetForm"
        :value="widgetModels"
        :remote="remoteFuncs"
      />
      <div v-if="content !== '' && type === 2" v-html="content" />
      <div v-if="lgnullFlag" id="lgNullData">暂无数据，请告知医生</div>
      <el-button v-if="type === 1" :disabled="isBtn ? false : 'disabled'" class="lg-save" type="primary" @click="handleTest">{{buttonText}}</el-button>
    </template>
  </div>
</template>
<script>
import { read, lgSave } from '@/api/common'
import { updataRead } from '@/api/info'
export default {
  data () {
    return {
      apiUri: 'AppPlanNodeItem',
      buttonText: '提交',
      title: '',
      appTitle: '加载中...',
      widgetForm: {
        list: [],
        config: {
          labelWidth: 100,
          labelPosition: 'right',
          size: 'small'
        }
      },
      widgetModels: {},
      remoteFuncs: {},
      isLoading: true,
      lgnullFlag: false,
      content: '',
      type: 0,
      isBtn: false
    }
  },
  mounted () {
    read(this.apiUri, parseInt(this.$route.query.id)).then(res => {
      if (res.code === 200) {
        setTimeout(() => {
          this.isLoading = false
        }, 500)
        if (res.info) {
          this.title = res.info.name
          this.type = res.info.type
          if (this.type === 1) {
            this.appTitle = '量表详情'
            if (res.info.content) {
              this.widgetForm = JSON.parse(res.info.content)
              if (this.widgetForm.list.length === 0) {
                this.lgnullFlag = true
                this.isBtn = false
              } else {
                this.lgnullFlag = false
                this.isBtn = true
              }
            }
          } else {
            this.appTitle = '宣教详情'
            this.isBtn = false
            this.content = res.info.content
            if (this.content || this.content !== '') {
              this.lgnullFlag = false
            } else {
              this.lgnullFlag = true
            }
            this.updataRead()
          }
          if (res.info.answer) {
            this.widgetModels = JSON.parse(res.info.answer)
            this.isBtn = false
            this.widgetForm.list.map(v => {
              v.options.disabled = true
            })
          }
        } else {
          this.lgnullFlag = true
        }
        if (this.isBtn) {
          this.buttonText = '提交'
        } else {
          this.buttonText = '已提交'
        }
      }
    })
  },
  methods: {
    updataRead () {
      updataRead(parseInt(this.$route.query.id)).then(res => {})
    },
    // 保存结果
    handleTest () {
      this.$refs.generateForm.getData().then(data => {
        this.$dialog.confirm({
          title: '提示',
          message: '提交后不可再修改，是否继续'
        }).then(() => {
          // on confirm
          this.$toast.loading({
            message: '加载中...',
            forbidClick: true,
            overlay: true,
            duration: 0
          })
          const datas = {
            answer: JSON.stringify(data),
            id: parseInt(this.$route.query.id),
            type: this.type,
            status: 1
          }
          lgSave(datas).then(res => {
            this.$toast.clear()
            if (res.code === 200) {
              this.updataRead()
              this.loading = false
              this.$toast.success('提交成功')
              this.widgetForm.list.map(v => {
                v.options.disabled = true
              })
              this.isBtn = false
              this.buttonText = '已提交'
            }
          })
        }).catch(() => {
          // on cancel
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.lg-title {
  font-size: 18px;
  color: #111111;
  text-align: center;
  line-height: 26px;
  margin: 0 0 20px;
  padding: 0 30px;
}
// 空数据
#lgNullData {
  display: inline-block;
  width: 100%;
  color: #666666;
  font-size: 14px;
}
.lg-container {
  padding: 20px;
  background-color: #fff;
  width: 100%;
  min-height: 100vh;
  overflow: auto;
  .load-container {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    .lg-icon-loading {
      display: inline-block;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1px solid gray;
      border-bottom-color: transparent;
      vertical-align: middle;
    }
    .lg-mescroll-rotate {
      -webkit-animation: mescrollRotate 0.6s linear infinite;
      animation: mescrollRotate 0.6s linear infinite;
    }
    span {
      color: gray;
      font-size: 14px;
      margin-left: 5px;
    }
  }
  .lg-save {
    width: 100%;
    margin-top: 30px;
  }
}
@-webkit-keyframes mescrollRotate {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes mescrollRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>
